<template>
  <el-dialog :title="!dataForm.id ? '新增配置' : '新增配置'" :close-on-click-modal="false" :visible.sync="visible" width="1200px"
    append-to-body>
    <div style="display:flex">
      <div style="flex:1">
        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="100px">
          <el-form-item label="组件元素" prop="type">
            <el-select v-model="dataForm.element" filterable placeholder="组件内部元素" size="medium" @change="onSelectElement">
              <el-option v-for="item in widgeElements" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="日历周期" prop="calendarType" v-if="dataForm.element === 6">
            <el-radio v-model="dataForm.calendarType" label="1">周 &nbsp;&nbsp;</el-radio>
            <el-radio v-model="dataForm.calendarType" label="2">月 &nbsp;&nbsp;</el-radio>
          </el-form-item>
          <el-form-item label="进度条排版" prop="powerType" v-if="dataForm.element === 10">
            <el-radio v-model="dataForm.powerType" label="1">横版</el-radio>
            <el-radio v-model="dataForm.powerType" label="2">竖版</el-radio>
            <el-radio v-model="dataForm.powerType" label="3">环形</el-radio>
          </el-form-item>
          <el-form-item label="文字文本" prop="text" v-if="textVisible">
            <el-col :span="8">
              <el-input v-model="dataForm.text" placeholder="文字文本"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="文字类型" prop="textType" v-if="textVisible">
            <el-select v-model="dataForm.textType" filterable placeholder="文字类型" size="medium" @change="onSelestTextType">
              <el-option v-for="item in widgeTextTypes" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="对齐方式" prop="textAlign" v-if="textVisible">
            <el-select v-model="dataForm.textAlign" filterable placeholder="文字对齐方式" size="medium">
              <el-option v-for="item in widgeTextAligns" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="文字大小" prop="fontSize" v-if="textVisible">
            <el-col :span="8">
              <el-input v-model="dataForm.fontSize" placeholder="字体大小"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="文字间距" prop="spacings" v-if="textVisible">
            <el-col :span="8">
              <el-input v-model="dataForm.spacings" placeholder="文字间距"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="文字字体" prop="fontName" v-if="textVisible">
            <el-select v-model="dataForm.fontName" filterable placeholder="文字字体">
              <el-option v-for="item in fontOptions" :key="item.id" :label="item.name" :value="item.name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="文字颜色" prop="fontColor" v-if="textVisible">
            <el-col :span="8">
              <el-input v-model="dataForm.fontColor" placeholder="文字颜色"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="图片元素" prop="image" v-if="imageVisible">
            <el-col :span="8">
              <div class="myhead">
                <el-tooltip content="图片元素" placement="top">
                  <el-image style="width: 90px; height: 60px" :src="dataForm.image + '?x-oss-process=image/resize,h_100,w_100'
                    " fit="contain" @click="uploadImageHandle()" alt=""  v-if="dataForm.element !== 7"/>
                          <el-image style="width: 90px; height: 60px" :src="dataForm.image + '?x-oss-process=image/resize,h_100,w_100'
                    " fit="contain" @click="uploadGifImageHandle()" alt=""   v-if="dataForm.element === 7" />
                </el-tooltip>
              </div>
            </el-col>
          </el-form-item>

             <el-form-item label="天气时间" prop="fontColor" v-if="imageGroupVisible">
            <el-col :span="8">
            <el-select v-model="weatherImagesType.day" filterable placeholder="天气时间" size="medium" >
              <el-option v-for="item in temperatureTimes" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
            </el-col>
          </el-form-item>


          <el-form-item label="天气时间" prop="fontColor" v-if="weatherInfoVisible">
            <el-col :span="8">
            <el-select v-model="weatherInfo.day" filterable placeholder="天气时间" size="medium" >
              <el-option v-for="item in temperatureTimes" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
            </el-col>
          </el-form-item>

          <el-form-item label="温度时间" prop="fontColor" v-if="temperatureVisible">
            <el-col :span="8">
            <el-select v-model="temperatureTime.day" filterable placeholder="温度时间" size="medium" >
              <el-option v-for="item in temperatureTimes" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
            </el-col>
          </el-form-item>

          <el-form-item label="温度类型" prop="fontColor" v-if="temperatureVisible">
            <el-col :span="8">
            <el-select v-model="temperatureTime.type" filterable placeholder="温度类型" size="medium" >
              <el-option v-for="item in temperaturtypes" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
            </el-col>
          </el-form-item>

            <el-form-item label="小类型选择" prop="smallType"  v-if="dataForm.element === 10">
            <el-col :span="8">
            <el-select v-model="progressInfo.smallType" filterable placeholder="选择类型" size="medium" >
              <el-option v-for="item in widgeTextTypes" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
            </el-col>
          </el-form-item>

           <el-form-item label="颜色" prop="color" v-if="dataForm.element === 10">
            <el-col :span="8">
              <el-input v-model="progressInfo.color" placeholder="请输入内容">
              </el-input>
            </el-col>
          </el-form-item>

              <el-form-item label="背景颜色" prop="bgColor" v-if="dataForm.element === 10">
            <el-col :span="8">
              <el-input v-model="progressInfo.bgColor" placeholder="请输入内容">
              </el-input>
            </el-col>
          </el-form-item>
       <el-form-item label="宽度" prop="width" v-if="dataForm.element === 10">
            <el-col :span="8">
              <el-input v-model="progressInfo.width" placeholder="请输入内容">
              </el-input>
            </el-col>
          </el-form-item>
 

          <el-form-item label="喝水最大值" prop="fontColor" v-if="hsdkVisible">
            <el-col :span="8">
              <el-input v-model="hsdkInfo.max" placeholder="请输入内容">
              </el-input>
            </el-col>
          </el-form-item>
          
          <el-form-item label="扩展信息" prop="fontColor">
            <el-col :span="8">
              <el-input type="textarea" autosize v-model="dataForm.extraInfo" placeholder="请输入内容">
              </el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="图片类型" prop="imageType" v-if="imageVisible">
            <el-select v-model="dataForm.imageType" filterable placeholder="图片类型" size="medium">
              <el-option v-for="item in widgeImageTypes" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="图片链接" prop="imageLink" v-if="imageVisible">
            <el-col :span="8">
              <el-input v-model="dataForm.imageLink" placeholder="图片链接"></el-input>
            </el-col>
          </el-form-item>
   
          <!-- <el-form-item label="组件宽度" prop="canvasW">
            <el-col :span="8">
              <el-input v-model="dataForm.canvasW" placeholder="组件的宽度(必须整数值)"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="组件高度" prop="canvasH">
            <el-col :span="8">
              <el-input v-model="dataForm.canvasH" placeholder="组件的高度(必须整数值)"></el-input>
            </el-col>
          </el-form-item> -->
          <el-form-item label="元素宽度" prop="elementW">
            <el-col :span="8">
              <el-input v-model="dataForm.elementW" placeholder="元素宽度(必须整数值)"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="元素高度" prop="elementH">
            <el-col :span="8">
              <el-input v-model="dataForm.elementH" placeholder="元素高度(必须整数值)"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="X轴位置" prop="elementX">
            <el-col :span="8">
              <el-input v-model="dataForm.elementX" placeholder="X轴位置(必须整数值)"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="Y轴位置" prop="elementY">
            <el-col :span="8">
              <el-input v-model="dataForm.elementY" placeholder="Y轴位置(必须整数值)"></el-input>
            </el-col>
          </el-form-item>
        </el-form>
      </div>
      <!-- 预览 start -->
      <div style="flex:1">
        <div class="bg-phone" v-if="this.widge.widgetSize == 'larege' ||
          this.widge.widgetSize == 'small'
        ">
          <!-- 小组件 start -->
          <div style="padding: 69px 33px;" v-if="this.widge.widgetSize == 'small'">
            <div class="bg-phone-content" style="text-align: left;">
              <!-- image  /1.8-->
              <!-- * 3 / 4 * 72 / 96 -->
              <img :src="this.widge.image" :style="'border-radius: 25px;width:' +
                (this.widgeConfigList[0].canvasW * 216) / 384 +
                'px;height:' +
                (this.widgeConfigList[0].canvasH * 216) / 384 +
                'px;text-align:left'
                " />
              <div v-for="item in widgeConfigList" :key="item.id" :style="'text-align:' +
                item.textAlign +
                ';width:' +
                (item.elementW * 216) / 384 +
                'px;position: absolute;color:#' +
                item.fontColor +
                ';height:' +
                (item.elementH * 216) / 384 +
                'px;left:' +
                (item.elementX * 216) / 384 +
                'px;top:' +
                (item.elementY * 216) / 384 +
                'px;font-family:' +
                item.fontName +
                ';line-height:100%;'
                ">
                 <img v-if="item.element == 2||item.element == 9" :src="item.image" :style="'margin-top:0px;height:' + (item.elementH * 216) / 384 + 'px'
                  " />
                <span :style="'font-size:' +
                  (item.fontSize * 72) / 96 +
                  'px;color:#' +
                  item.fontColor +
                  ';letter-spacing:' +
                  (item.spacings == 0 ? 0 : (item.spacings / 72) * 96) +
                  'px;line-height:100%;'
                  " v-else>{{ item.text }}</span>
              </div>
            </div>
          </div>
          <!-- 小组件 end -->
          <!-- 大组件 start -->
          <div style="padding: 293px 34px 0px 34px;" v-if="this.widge.widgetSize == 'larege'">
            <div class="bg-phone-content" style="text-align: left;">
              <!-- width:100%;height:auto 2.76-->
              <img :src="this.widge.image" :style="'border-radius: 25px;width:' +
                (this.dataForm.canvasW * 216) / 384 +
                'px;height:' +
                (this.dataForm.canvasH * 216) / 384 +
                'px;text-align:left'
                " />
              <!-- width:' + this.dataForm.elementW /2 + 'px; -->
              <div v-for="item in widgeConfigList" :key="item.id" :style="'text-align:' +
                item.textAlign +
                ';width:' +
                (item.elementW * 216) / 384 +
                'px;position: absolute;color:#' +
                item.fontColor +
                ';height:' +
                (item.elementH * 216) / 384 +
                'px;left:' +
                (item.elementX * 216) / 384 +
                'px;top:' +
                (item.element == 2
                  ? (item.elementY * 423) / 752 +
                  (item.elementH * 216) / 384 / 5
                  : (item.elementY * 423) / 752) +
                'px;font-family:' +
                item.fontName +
                ';line-height:100%;'
                ">
                <img v-if="item.element == 2||item.element == 9" :src="item.image" :style="'margin-top:0px;height:' + (item.elementH * 216) / 384 + 'px'
                  " />
                <span :style="'font-size:' +
                  (item.fontSize / 3) * 4 +
                  'px;color:#' +
                  item.fontColor +
                  ';letter-spacing:' +
                  (item.spacings == 0 ? 0 : (item.spacings / 3) * 4 - 2) +
                  'px;line-height:100%;'
                  " v-else>{{ item.text }}</span>
              </div>
            </div>
          </div>


          <!-- 大组件 end -->
        </div>
        <!-- 中组件 start -->
        <div class="bg-phone1" v-else>
          <div style="padding: 525px 34px 0px 32px;">
            <div class="bg-phone-content" style="text-align: left;">
              <!-- width:100%;height:auto 2.76-->
              <img :src="this.widge.image" :style="'border-radius: 25px;width:' +
                (this.dataForm.canvasW * 216) / 384 +
                'px;height:' +
                (this.dataForm.canvasH * 216) / 384 +
                'px;text-align:left'
                " />
              <!-- width:' + this.dataForm.elementW / 1.8 + 'px; -->
              <div v-for="item in widgeConfigList" :key="item.id">
                <div :style="'text-align:' +
                  item.textAlign +
                  ';width:' +
                  (item.elementW * 216) / 384 +
                  'px;position: absolute;color:#' +
                  item.fontColor +
                  ';height:' +
                  (item.elementH * 216) / 384 +
                  'px;left:' +
                  (item.elementX * 216) / 384 +
                  'px;top:' +
                  (item.elementY * 216) / 384 +
                  'px;font-family:' +
                  item.fontName +
                  ';line-height:100%;'
                  ">
                  <img v-if="item.element == 2||item.element == 9" :src="item.image" :style="'margin-top:0px;height:' +
                    (item.elementH * 216) / 384 +
                    'px'
                    " />
                  <span :style="'font-size:' +
                    (item.fontSize * 72) / 96 +
                    'px;color:#' +
                    item.fontColor +
                    ';letter-spacing:' +
                    (item.spacings == 0 ? 0 : (item.spacings / 72) * 96 - 2) +
                    'px;line-height:100%;'
                    " v-else>{{ item.text }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 中组件 end -->
      </div>
    </div>
    <!-- 预览 end -->
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>

    <!-- 弹窗, 0、元素内容图 -->
    <widge-upload-image v-if="uploadImageVisible" ref="widgeUploadImage"
      @refreshDataList="refreshUploadImage"></widge-upload-image>
  <!-- 弹窗, 0、gif内容图 -->
    <WidgeUploadGifImage v-if="uploadGifImageVisible" ref="widgeUploadGifImage"
      @refreshDataList="refreshUploadGifImage"></WidgeUploadGifImage>

         <!-- 弹窗, 上传组件图 -->
    <widge-upload-images
      v-if="uploadImagesVisible"
      ref="widgeUploadImages"
      @refreshDataList="refreshUploadImages"
    ></widge-upload-images>
  </el-dialog>
</template>

<script>
import WidgeUploadImage from "./widge-upload-image";
import WidgeUploadGifImage from "./widge-upload-gifimage";
export default {
  data () {
    return {
      visible: false,
      widgeElements: [
        {
          value: 1,
          label: "文字"
        },
        {
          value: 2,
          label: "图片"
        },
        // {
        //   value: 3,
        //   label: "电量"
        // },
        // {
        //   value: 4,
        //   label: "温度"
        // },
        {
          value: 5,
          label: "计时天数"
        },
        {
          value: 6,
          label: "日历"
        },
        {
          value: 7,
          label: "动图"
        },
        // {
        //   value: 8,
        //   label: "步数"
        // },
        {
          value: 9,
          label: "天气组图"
        },
         {
          value: 10,
          label: "进度条"
        }
      ],
      widgeTextTypes: [
        {
          value: 1,
          label: "文字"
        },
        {
          value: 2,
          label: "星期"
        },
        {
          value: 3,
          label: "年月"
        },
        {
          value: 4,
          label: "时分"
        }
        ,
        {
          value: 5,
          label: "步数"
        }
        ,
        {
          value: 6,
          label: "气温"
        }
        ,
        {
          value: 7,
          label: "喝水打卡"
        }
        ,
        {
          value: 8,
          label: "电量"
        }
         ,
        {
          value: 9,
          label: "天气信息"
        }
         ,
        {
          value: 10,
          label: "城市"
        } ,
        {
          value: 11,
          label: "目标值"
        }
      ],
      temperatureTimes: [
        {
          value: "0",
          label: "今天"
        },
         {
          value: "1",
          label: "明天"
        },
        {
          value: "2",
          label: "后天"
        }
      ],
       temperaturtypes: [
        {
          value: "high",
          label: "最高"
        },
         {
          value: "average",
          label: "平均"
        },
        {
          value: "low",
          label: "最低"
        }
      ],
      widgeTextAligns: [
        {
          value: "left",
          label: "居左"
        },
        {
          value: "center",
          label: "居中"
        },
        {
          value: "right",
          label: "居右"
        }
      ],
      fontOptions: [
        {
          id: "07NikumaruFont",
          name: "07NikumaruFont",
          url: "http://file-cdn-theme.cykonhy.com/fonts/07NikumaruFont.otf"
        },
        {
          id: "DOUYU",
          name: "DOUYU",
          url: "http://file-cdn-theme.cykonhy.com/fonts/DOUYU.ttf"
        },
        {
          id: "Dancing Script",
          name: "Dancing Script",
          url: "http://file-cdn-theme.cykonhy.com/fonts/Dancing Script.ttf"
        },
        {
          id: "Fusion-Pixel-Regular",
          name: "Fusion-Pixel-Regular",
          url:
            "http://file-cdn-theme.cykonhy.com/fonts/Fusion-Pixel-Regular.otf"
        },
        {
          id: "GyateLuminescence",
          name: "GyateLuminescence",
          url: "http://file-cdn-theme.cykonhy.com/fonts/GyateLuminescence.ttf"
        },
        {
          id: "HappyZcool-2016",
          name: "HappyZcool-2016",
          url: "http://file-cdn-theme.cykonhy.com/fonts/HappyZcool-2016.ttf"
        },
        {
          id: "Mitimasu",
          name: "Mitimasu",
          url: "http://file-cdn-theme.cykonhy.com/fonts/Mitimasu.ttf"
        },
        {
          id: "MuYaoSoftbrush",
          name: "MuYaoSoftbrush",
          url: "http://file-cdn-theme.cykonhy.com/fonts/MuYaoSoftbrush.ttf"
        },
        {
          id: "PangMenZhengDao",
          name: "PangMenZhengDao",
          url: "http://file-cdn-theme.cykonhy.com/fonts/PangMenZhengDao.otf"
        },
        {
          id: "QTxiaotu",
          name: "QTxiaotu",
          url: "http://file-cdn-theme.cykonhy.com/fonts/QTxiaotu.ttf"
        },
        {
          id: "TsangerFeiBai",
          name: "TsangerFeiBai",
          url: "http://file-cdn-theme.cykonhy.com/fonts/TsangerFeiBai.ttf"
        },
        {
          id: "YouSheBiaoTiHei",
          name: "YouSheBiaoTiHei",
          url: "http://file-cdn-theme.cykonhy.com/fonts/YouSheBiaoTiHei.ttf"
        },
        {
          id: "Yozai",
          name: "Yozai",
          url: "http://file-cdn-theme.cykonhy.com/fonts/Yozai.ttf"
        },
        {
          id: "baotuxiaobaiti",
          name: "baotuxiaobaiti",
          url: "http://file-cdn-theme.cykonhy.com/fonts/baotuxiaobaiti.ttf"
        },
        {
          id: "muyao",
          name: "muyao",
          url: "http://file-cdn-theme.cykonhy.com/fonts/muyao.ttf"
        },
        {
          id: "qiantubifengshouxieti",
          name: "qiantubifengshouxieti",
          url:
            "http://file-cdn-theme.cykonhy.com/fonts/qiantubifengshouxieti.ttf"
        },
        {
          id: "云峰飞云体",
          name: "云峰飞云体",
          url: "http://file-cdn-theme.cykonhy.com/fonts/云峰飞云体.ttf"
        },
        {
          id: "仓耳小丸子",
          name: "仓耳小丸子",
          url: "http://file-cdn-theme.cykonhy.com/fonts/仓耳小丸子.ttf"
        },
        {
          id: "苹方",
          name: "苹方",
          url: "http://file-cdn-theme.cykonhy.com/fonts/苹方.ttf"
        },
        {
          id: "LCD",
          name: "LCD",
          url: "http://file-cdn-theme.cykonhy.com/fonts/LCD.TTF"
        },
        {
          id: "Lets-go-Digital",
          name: "Lets-go-Digital",
          url: "http://file-cdn-theme.cykonhy.com/fonts/Lets-go-Digital.TTF"
        },
        {
          id: "MiSans-Thin",
          name: "MiSans-Thin",
          url: "https://theme2020.oss-cn-qingdao.aliyuncs.com/fonts/MiSans-Thin.ttf"
        },
        {
          id: "MiSans-Regular",
          name: "MiSans-Regular",
          url: "https://theme2020.oss-cn-qingdao.aliyuncs.com/fonts/MiSans-Regular.ttf"
        },
        {
          id: "MiSans-Medium",
          name: "MiSans-Medium",
          url: "https://theme2020.oss-cn-qingdao.aliyuncs.com/fonts/MiSans-Medium.ttf"
        },
        {
          id: "MiSans-Heavy",
          name: "MiSans-Heavy",
          url: "https://theme2020.oss-cn-qingdao.aliyuncs.com/fonts/MiSans-Heavy.ttf"
        },
        {
          id: "MiSans-Bold",
          name: "MiSans-Bold",
          url: "https://theme2020.oss-cn-qingdao.aliyuncs.com/fonts/MiSans-Bold.ttf"
        },
       {
          id: "shanhai_baichashoushu",
          name: "山海白茶手书",
          url: "https://theme2020.oss-cn-qingdao.aliyuncs.com/fonts/shanhai_baichashoushu.ttf"
        },
        {
          id: "shanhai_huihuaben",
          name: "山海绘画本",
          url: "https://theme2020.oss-cn-qingdao.aliyuncs.com/fonts/shanhai_huihuaben.ttf"
        },
        {
          id: "shanhai_manjianghong",
          name: "山海字体社满江红",
          url: "https://theme2020.oss-cn-qingdao.aliyuncs.com/fonts/shanhai_manjianghong.TTF"
        },
        {
          id: "shanhai_pumoshoushu",
          name: "山海朴墨手书",
          url: "https://theme2020.oss-cn-qingdao.aliyuncs.com/fonts/shanhai_pumoshoushu.TTF"
        },
        {
          id: "shanhai_putishoushu",
          name: "山海菩提手书",
          url: "https://theme2020.oss-cn-qingdao.aliyuncs.com/fonts/shanhai_putishoushu.ttf"
        },
        {
          id: "shanhai_qingheti",
          name: "山海清荷体",
          url: "https://theme2020.oss-cn-qingdao.aliyuncs.com/fonts/shanhai_qingheti.ttf"
        },
        {
          id: "shanhai_xiaoguaishou",
          name: "山海小怪兽",
          url: "https://theme2020.oss-cn-qingdao.aliyuncs.com/fonts/shanhai_xiaoguaishou.TTF"
        },
        {
          id: "shanhai_xiaolongmao",
          name: "山海小龙猫",
          url: "https://theme2020.oss-cn-qingdao.aliyuncs.com/fonts/shanhai_xiaolongmao.TTF"
        },
        {
          id: "shanhai_xiaonuomi",
          name: "山海小糯米",
          url: "https://theme2020.oss-cn-qingdao.aliyuncs.com/fonts/shanhai_xiaonuomi.TTF"
        },
        {
          id: "shanhai_xiaoshitou",
          name: "山海小石头",
          url: "https://theme2020.oss-cn-qingdao.aliyuncs.com/fonts/shanhai_xiaoshitou.TTF"
        },
        {
          id: "shanhai_xiaotuanzi",
          name: "山海小团子",
          url: "https://theme2020.oss-cn-qingdao.aliyuncs.com/fonts/shanhai_xiaotuanzi.TTF"
        },
        {
          id: "shanhai_xiaowantong",
          name: "山海小顽童",
          url: "https://theme2020.oss-cn-qingdao.aliyuncs.com/fonts/shanhai_xiaowantong.TTF"
        },
        {
          id: "shanhai_xiaoxiongruantang",
          name: "山海小熊软糖",
          url: "https://theme2020.oss-cn-qingdao.aliyuncs.com/fonts/shanhai_xiaoxiongruantang.TTF"
        }
      ],
      widgeImageTypes: [
        {
          value: 1,
          label: "支付宝扫码图"
        },
        {
          value: 2,
          label: "支付宝乘车码"
        },
        {
          value: 3,
          label: "支付宝健康码"
        },
        {
          value: 4,
          label: "微信扫码图"
        }
      ],
      widgeConfigList: [],
      dataForm: {
        id: 0,
        widgeId: "",
        element: "",
        calendarType: "2",
        powerType: "1",
        text: "",
        textType: "",
        textAlign: "",
        fontSize: "",
        spacings: "",
        fontName: "",
        fontColor: "",
        extraInfo: "",
        image: "http://file-cdn-theme.cykonhy.com/default/default.jpg",
        imageType: "",
        imageLink: "",
        canvasH: "",
        canvasW: "",
        elementW: "",
        elementH: "",
        elementX: "",
        elementY: ""
      },
      dataRule: {
        canvasH: [
          { required: true, message: "组件的高度不能为空", trigger: "blur" },
          {
            validator: this.numValidator,
            message: "组件高度必须是整数",
            trigger: "blur"
          }
        ],
        canvasW: [
          { required: true, message: "组件的宽度不能为空", trigger: "blur" },
          {
            validator: this.numValidator,
            message: "组件宽度必须是整数",
            trigger: "blur"
          }
        ],
        elementW: [
          { required: true, message: "元素宽度不能为空", trigger: "blur" },
          {
            validator: this.numValidator,
            message: "元素宽度必须是整数",
            trigger: "blur"
          }
        ],
        elementH: [
          { required: true, message: "元素高度不能为空", trigger: "blur" },
          {
            validator: this.numValidator,
            message: "元素高度必须是整数",
            trigger: "blur"
          }
        ],
        elementX: [
          { required: true, message: "X轴位置不能为空", trigger: "blur" },
          {
            validator: this.numValidator,
            message: "X轴位置必须是整数",
            trigger: "blur"
          }
        ],
        elementY: [
          { required: true, message: "Y轴位置不能为空", trigger: "blur" },
          {
            validator: this.numValidator,
            message: "Y轴位置必须是整数",
            trigger: "blur"
          }
        ]
      },
      widge: {},
      widgeConfig: {},
      textVisible: true,
      imageVisible: false,
      uploadImageVisible: false,
      uploadGifImageVisible: false,
      uploadImagesVisible:false,
         progressInfo:{
        progressType:"1",
        smallType:"",
        color:"",
        bgColor:"",
        width:""
       },
      temperatureTime:{
        day:"",
        type:""
      },
      weatherInfo:{
         day:""
      },
      weatherImagesType:{
         day:""
      },
       hsdkInfo:{
         max:""
      }
    };
  },
  components: {
    WidgeUploadImage,
    WidgeUploadGifImage
  },
  watch: {
    'dataForm': {
      handler(newVal, oldVal) {
        this.updateWidgeConfigList(newVal);
      },
      deep: true
    }
  },
  methods: {
    init (id) {
      console.log("widgetId:1111" + id)

      this.dataForm.widgeId = id || 0;
      this.visible = true;

      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        //获取组件配置列表
        this.$http({
          url: this.$http.adornUrl(`/widge/widge-config/list`),
          method: "get",
          params: this.$http.adornParams({
            page: 1,
            limit: 10000,
            widgeId: id
          })
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.widgeConfigList = data.page.list;
            this.widgeConfigList.push(this.dataForm);
            console.log("widgeConfigList:", this.widgeConfigList)
          }
          this.getWidgeInfo(id);
        });
      });
      this.initFontsList();
    },
    updateWidgeConfigList(updatedDataForm) {
      let index = this.widgeConfigList.findIndex(item => item.id === updatedDataForm.id);
      if (index !== -1) {
        this.$set(this.widgeConfigList, index, { ...this.widgeConfigList[index], ...updatedDataForm });
        // console.log("Updated widgeConfigList for id:", updatedDataForm.id);
        // console.log(this.widgeConfigList);
      }
    },
    getWidgeInfo(widgeId) {
      this.$http({
        url: this.$http.adornUrl(`/widge/widge/info/${widgeId}`),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.widge = data.widge;
          console.log("组件信息：")
          console.log(this.widge)
          //判断this.widge的widgetSize 是"small" ,"medium" ,"larege" "larege" 752 720 ,”small"  338 338,"medium"  338 720 根据这个规则设置dataForm的canvasH和canvasH和canvasW
          if (this.widge.widgetSize == "small") {
            this.dataForm.canvasH = 338;
            this.dataForm.canvasW = 338;
          } else if (this.widge.widgetSize == "medium") {
            this.dataForm.canvasH = 338;
            this.dataForm.canvasW = 720;
          } else if (this.widge.widgetSize == "larege") {
            this.dataForm.canvasH = 752;
            this.dataForm.canvasW = 720;
          }
          // elementH elementW 设置默认值
          this.dataForm.elementH = 100;
          this.dataForm.elementW = 100;
          this.dataForm.fontSize = 24;
        }
      });
    },
    initFontsList () {
      this.$http({
        url: this.$http.adornUrl("/sys/fonts/list"),
        method: "get",
        params: this.$http.adornParams({
          page: 1,
          limit: 10000
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.fontOptions = data.page.list;
        }
      });
    },
    // 筛选元素类型
    onSelectElement (val) {
      debugger;
       this.temperatureVisible = false
        this.weatherInfoVisible = false
      if (val === 2||val ===7) {
        //图片和动图
        this.textVisible = false;
        this.imageVisible = true;
        this.progressVisible=false;
      } 
      else if (val === 9) {
        //天气组图
        this.imageGroupVisible = true;
        this.textVisible = false;
        this.progressVisible=false;
        this.imageVisible = false;
      }else if (val === 10) {
        //进度条
        this.progressVisible=true;
        this.imageGroupVisible = false;
        this.textVisible = false;
        this.imageVisible = false;
      }else {
        this.textVisible = true;
        this.imageVisible = false;
        this.progressVisible=false;
      }
    
    },
    onSelestTextType (val) {
            debugger;
      console.log("onSelestTextType:" + val);
      if (val === 6) {
        this.temperatureVisible = true;
        this.weatherInfoVisible = false;
         this.hsdkVisible = false;
      }else if(val === 9){
          this.temperatureVisible = false;
         this.weatherInfoVisible= true;
          this.hsdkVisible = false;
      }else if(val === 7){
        this.hsdkVisible = true;
        this.temperatureVisible = false;
        this.weatherInfoVisible = false;
      } else {
        this.temperatureVisible = false;
        this.weatherInfoVisible = false;
        this.hsdkVisible = false;
         }
    },

    // 1、元素内容图
    uploadImageHandle () {
      this.uploadImageVisible = true;
      this.$nextTick(() => {
        this.$refs.widgeUploadImage.init();
      });
    },
    uploadGifImageHandle(){
      this.uploadGifImageVisible = true;
      this.$nextTick(() => {
        this.$refs.widgeUploadGifImage.init();
      });
    },
    //组图元素内容图
      refreshUploadImages(images) {

      this.uploadImagesVisible = true;
      this.$nextTick(() => {
        this.$refs.widgeUploadImages.init();
      });
      // if (images != null && images.length > 0) {
      //   this.dataForm.weatherImages = images;
      // }
      // this.uploadImagesVisible = false;
    },
    refreshUploadImage (filePath) {
      if (filePath != "") {
        this.dataForm.image = filePath;
      }
      this.uploadDifImageVisible = false;
       this.imageGroupVisible = false;
      this.uploadImagesVisible = false;
      this.progressVisible = false;
      this.temperatureVisible= false;
      this.weatherInfoVisible= false;
      this.hsdkVisible= false;
     },
    refreshUploadGifImage (filePath) {
      if (filePath != "") {
        this.dataForm.image = filePath;
      }
      this.uploadDifImageVisible = false;
       this.imageGroupVisible = false;
      this.uploadImagesVisible = false;
      this.progressVisible = false;
      this.temperatureVisible= false;
      this.weatherInfoVisible= false;
      this.hsdkVisible= false;
     },

    //校验是否值整数
    numValidator (rule, value, callback) {
      //^[a-zA-Z0-9_]+$      // 所有包含一个以上的字母、数字或下划线的字符串
      //^[1-9][0-9]*$        // 所有的正整数
      //^\-?[0-9]+$          // 所有的整数
      //^[-]?[0-9]+(\.[0-9]+)?$ // 所有的浮点数
      const valueReg = /^\-?[0-9]+$/;
      if (!valueReg.test(value)) {
        callback(new Error(""));
        return;
      }
      callback();
    },

    // 表单提交
    dataFormSubmit () {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          if(this.dataForm.element ===1  ){
            //文字类型
            if(this.dataForm.textType === 6){
              //气温
              if(this.temperatureTime.day.length > 0 && this.temperatureTime.type.length > 0){
              //将this.temperatureTime转为json格式数据
              this.dataForm.extraInfo = JSON.stringify(this.temperatureTime);
              }
            }else if(this.dataForm.textType === 9){
              if(this.weatherInfo.day.length > 0){
                 this.dataForm.extraInfo = JSON.stringify(this.weatherInfo);
              }
            }else if(this.dataForm.textType === 7){
              if(this.hsdkInfo.max.length > 0){
                 this.dataForm.extraInfo = JSON.stringify(this.hsdkInfo);
              }
            }
          } else if(this.dataForm.element ===9){
             
              if(this.weatherImagesType.day.length > 0){
                //将this.temperatureTime转为json格式数据
                this.dataForm.extraInfo = JSON.stringify(this.weatherImagesType);
              }
          }else if(this.dataForm.element === 10){
              this.dataForm.extraInfo = JSON.stringify(this.progressInfo);
          }
          this.$http({
            url: this.$http.adornUrl(`/widge/widge-config/save`),
            method: "post",
            data: this.$http.adornData({
              id: this.dataForm.id || undefined,
              widgeId: this.dataForm.widgeId,
              element: this.dataForm.element,
              calendarType: this.dataForm.calendarType,
              powerType: this.dataForm.powerType,
              text: this.dataForm.text,
              textType: this.dataForm.textType,
              textAlign: this.dataForm.textAlign,
              fontSize: this.dataForm.fontSize,
              spacings: this.dataForm.spacings,
              fontName: this.dataForm.fontName,
              fontColor: this.dataForm.fontColor,
              extraInfo: this.dataForm.extraInfo,
              image: this.dataForm.image,
              imageType: this.dataForm.imageType,
              imageLink: this.dataForm.imageLink,
              canvasH: this.dataForm.canvasH,
              canvasW: this.dataForm.canvasW,
              elementW: this.dataForm.elementW,
              elementH: this.dataForm.elementH,
              elementX: this.dataForm.elementX,
              elementY: this.dataForm.elementY
            })
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refreshDataList");
                }
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    }
  }
};
</script>
<style scoped>
.el-form-item{
  margin-bottom: 32px;
}
.el-form-item__label{
  font-weight: bolder;

}
.el-col-8{
  margin-left: 10px;
  width: 280px;
}
.el-select{
  margin-left: 10px;
  width: 280px;
}
.bg-phone {
  background: url("../../../assets/img/bg-phone.png") no-repeat;
  background-size: 100%;
  /* width: 360px;
  height: 710px; */
  width: 525px;
  height: 1050px;
  padding: 50px 30px 30px 30px;
  margin: 0 auto;
}

.bg-phone1 {
  background: url("../../../assets/img/bg-phone1.png") no-repeat;
  background-size: 100%;
  /* width: 360px;
  height: 710px; */
  width: 525px;
  height: 1050px;
  padding: 50px 30px 30px 30px;
  margin: 0 auto;
}

.bg-phone-content {
  height: 560px;
  border-radius: 5px;
  position: relative;
}
</style>
